<template>
  <div class="container clearfix">
    <header class="breadcrumb-wrap">
      <el-breadcrumb class="breadcrumb pull-left" separator=">">
        <span class="pull-left">当前位置：</span>
        <el-breadcrumb-item><nuxt-link class="text-primay-hover"  :to="{ path: '/' }">首页</nuxt-link></el-breadcrumb-item>
        <el-breadcrumb-item>行业资讯</el-breadcrumb-item>
      </el-breadcrumb>
    </header>

    <section class="news">
      <div>
        <ul>
          <li class="item pic-text" v-for="item in articles" :key="item.articleContentId">
            <div class="img-box">
              <nuxt-link :to="{path:`/news/${item.articleContentId}`}" target="_blank">
                <img v-lazyload.cdn="item.picture" :alt="item.name"  :source="item.picture | imgCdn"/>
              </nuxt-link>
            </div>

            <div class="text-content">
              <dl>
                <dt class="title text-overflow" :title="item.name">
                  <nuxt-link :to="{path:`/news/${item.articleContentId}`}">
                    {{ item.name }}
                  </nuxt-link>
                </dt>
                <dd class="desc" :title="item.introduction">{{ item.introduction | cutStr(280) }}</dd>
                <dd class="tags">
                  <span class="source">来源：{{ item.source}}</span>|
                  <time class="time">{{ item.updateTime }}</time>
                </dd>
              </dl>
            </div>
            <!--分享-->
            <div class="share">
              <Share type="card"
                     :data-share="{
                      url:`${url + '/'+ item.articleContentId}`,
                      title: `${item.name}`,
                      image: `${address.IMG_ADDRESS + item.picture}`,
                      description:`${item.introduction}`
                      }">
              </Share>
            </div>
          </li>
        </ul>
      </div>

      <el-pagination
        v-if="totalPage > 1"
        class="pagination"
        @current-change="pageChange"
        :current-page.sync="page"
        :page-count="totalPage"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    </section>

    <!--推荐资讯-->
    <aside class="recomd-box">
      <SideBar :border="true" :data="recomds" :adv="adv"></SideBar>
    </aside>
  </div>
</template>

<script>
  import axios from '~/plugins/axios'
  import address from '~/config'
  import Share from '~/components/Share'
  import SideBar from '~/components/News/SideBar'

  export default {
    components: {
      Share,
      SideBar
    },

    data () {
      return {
        address,
        url: ''
      }
    },

    head () {
      let seo = {
        title: `矿产行业资讯，矿产原材料价格走势，矿产市场行情动态 - 聚贸矿产`,
        desc: `聚贸矿产提供最新的矿产行业资讯、矿产价格走势、行业重大新闻事件追踪，准确把握矿产价格和市场走势，-聚贸矿产。`
      }
      return {
        title: seo.title,
        meta: [{
          hid: 'description',
          name: 'description',
          content: seo.desc
        }]
      }
    },

    methods: {
      pageChange (p) {
        this.page = p
        this.$router.push({
          path: '/news',
          query: {
            page: this.page
          }
        })
      }
    },
    mounted () {
      this.url = location.href
    },

    async asyncData ({query}) {
      const page = query.page || 1
      const q = {currentPage: page, pageSize: 10}

      const [{result: articles = [], totalPage}, {data: recomds}, {data: adv = []}] = await Promise.all([
        axios.get('/information/pageArtcle', {params: q}).then(data => data.data.data),
        axios.get('/information/listArtcle').then(data => data.data),
        axios.get('/information/volist').then(data => data.data)
      ])

      return {
        articles,
        totalPage,
        page,
        adv,
        recomds
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";

  .header {
    padding: 20px 0;
    .title {
      color: #6e6e6e;
      padding-left: 10px;
      font-size: 14px;
      line-height: 14px;
      font-weight: normal;
      border-left: 2px solid $--color-primary;

    }
  }

  .news {
    float: left;
    width: 830px;
    background-color: #fff;
    border: 1px solid #dedede;
    padding: 0 20px 20px;

    .item {
      border-bottom: 1px dashed #dedede;
      padding: 30px 0;
      position: relative;
    }

    .img-box {
      width: 200px;
      height: 150px;
      vertical-align: middle;
      text-align: center;

      a {
        display: block;
        height: 100%;

        &:after {
          display: inline-block;
          vertical-align: middle;
          content: "";
          height: 100%;
        }
      }

      img {
        vertical-align: middle;
        width: 200px;
        height: 150px;
      }

    }

    .title {
      font-size: 16px;
      font-weight: normal;
      color: #3e3e3e;
      line-height: 34px;
      &:hover {
        color: $--color-primary;
      }
    }

    .share {
      position: absolute;
      right: 10px;
      bottom: 30px;
      z-index: 15;
    }

    .desc {
      line-height: 20px;
      padding-top: 10px;
      color: #6e6e6e;
      height: 94px;
      overflow: hidden;
    }
    .tags {
      color: #9e9e9e;
      font-size: 12px;
    }
    .source {
      padding-right: 20px;
    }
    .time {
      padding-left: 20px;
    }
  }
</style>
